<template>
  <view class="study-room">
    <!-- 标题和日期选择 -->
    <view class="header">
      <text class="title">座位选择器</text>
      <picker mode="date" @change="onDateChange" :value="selectedDate">
        <view class="date-picker">{{ selectedDate || '请选择日期' }}</view>
      </picker>
    </view>

    <!-- 网格布局 -->
    <view
        class="grid"
        :style="{ gridTemplateColumns: `repeat(${maxX}, 1fr)` }"
    >
      <!-- 关键修改：动态类名拆分，优先保留图片容器样式，再叠加状态样式 -->
      <view
          v-for="cell in sortedGridData"
          :key="cell.id"
          class="cell cell-img-container"
      :class="[getCellStatusClass(cell)]"
      @click="handleClick(cell)"
      >

      <image
          v-if="cell.photo"
      :src="cell.photo"
      class="cell-img"
      mode="aspectFill"
      @error="handleImageError(cell)"
      @load="handleImageLoad(cell)"
      />
      <view v-else-if="cell.photo && cell.imageError" class="cell-img-placeholder">
        <text class="placeholder-text">图片加载失败</text>
      </view>
    </view>
  </view>

  <!-- 预约方式选择对话框 -->
  <view class="modal-mask" v-if="showBookingModal">
    <view class="modal-container">
      <view class="modal-header">
        <text class="modal-title">选择预约方式</text>
        <text class="modal-close" @click="showBookingModal = false">×</text>
      </view>

      <view class="modal-body">
        <!-- 用户剩余次数 -->
        <view class="remaining-times">
          <text>剩余次数: {{ userNum }}</text>
        </view>

        <!-- 次数预约选项 -->
        <view class="booking-option" @click="confirmBooking(0)" v-if="userNum > 0">
          <text>使用次数预约</text>
        </view>

        <!-- 会员卡列表 -->
        <view class="card-list-title" v-if="validCardOrders.length > 0">
          <text>可用会员卡</text>
        </view>
        <view
            class="booking-option"
            v-for="card in validCardOrders"
            :key="card.id"
            @click="confirmBooking(card.id)"
        >
          <text>使用会员卡: {{ card.cardName }}</text>
        </view>

        <!-- 无可用支付方式提示 -->
        <view class="no-option" v-if="userNum <= 0 && validCardOrders.length === 0">
          <text>暂无可用的预约方式</text>
        </view>
      </view>
    </view>
  </view>  </view>
</template>

<script>
export default {
  data() {
    return {
      gridData: [],
      sortedGridData: [],
      maxX: 0,
      maxY: 0,
      selectedDate: this.getToday(),
      user: uni.getStorageSync('xm-user') || {},
      userNum: 0,
      cardOrders: [], // 所有会员卡订单
      validCardOrders: [], // 有效的会员卡订单（状态为待使用）
      showBookingModal: false, // 预约方式选择对话框
      currentCell: null // 当前选择的座位
    }
  },
  onLoad() {
    this.loadData()
    this.loadMeData()
  },
  methods: {
    // 日期选择
    onDateChange(e) {
      this.selectedDate = e.detail.value
      this.loadData()
    },

    // 加载座位数据（保留图片路径处理）
    loadData() {
      this.$request.get('/grid/selectAll', {
        time: this.selectedDate
      }).then(res => {
        if (res.code === '200' && Array.isArray(res.data)) {
          this.gridData = res.data
          // 小程序图片路径预处理：补全域名（替换为你的实际服务器域名）
          this.gridData = this.gridData.map(cell => {
            if (cell.photo) {
              // 处理相对路径（如 "/static/seat1.png" → 补全http/https）
              if (cell.photo.startsWith('/') && !cell.photo.startsWith('http')) {
                const baseUrl = 'https://你的服务器域名'; // 示例：https://study-room.com
                cell.photo = baseUrl + cell.photo;
              }
              // 初始化图片状态
              cell.imageError = false;
              cell.processedPhoto = '';
            }
            return cell;
          });
          this.processGridData()
        } else {
          uni.showToast({ title: '获取数据失败', icon: 'none' })
        }
      })
    },

    // 加载用户信息和会员卡
    loadMeData() {
      // 加载会员卡订单
      this.$request.get('/cardOrder/selectAll', {
        userId: this.user.id
      }).then(res => {
        if (res.code === '200' && Array.isArray(res.data)) {
          this.cardOrders = res.data
          this.validCardOrders = res.data.filter(card => card.status === '待使用')
        }
      })

      // 加载用户剩余次数
      if (this.user.id) {
        this.$request.get('/user/selectById/' + this.user.id).then(res => {
          if (res.code === '200' && res.data) {
            this.userNum = res.data.card || 0
          }
        })
      }
    },

    // 预约座位
    book(id) {
      if (id === null) id = 0
      this.$request.post('/cardOrder/use', {
        cardOrderId: id,
        gridId: this.currentCell.id,
        time: this.selectedDate
      }).then(res => {
        if (res.code === '200') {
          uni.showToast({ title: '预约成功', icon: 'success' })
          this.showBookingModal = false
          this.loadData()
          this.loadMeData()
        } else {
          uni.showToast({ title: res.msg || '预约失败', icon: 'none' })
        }
      }).catch(() => {
        uni.showToast({ title: '网络异常', icon: 'none' })
      })
    },

    // 处理网格数据
    processGridData() {
      if (!this.gridData.length) return
      this.maxX = Math.max(...this.gridData.map(item => item.x))
      // 按 y、x 排序（确保网格布局正确）
      this.sortedGridData = [...this.gridData].sort((a, b) => {
        if (a.y !== b.y) return a.y - b.y
        return a.x - b.x
      })
    },

    // 关键修改：仅返回“状态相关类”，不包含影响图片显示的基础样式
    getCellStatusClass(cell) {
      // 座位状态：被预约/可预约（仅控制边框、半透明遮罩，不遮挡图片）
      if (cell.type === '座位') {
        if (cell.isBooked === '被预约') {
          return 'cell-status-booked' // 被预约：加半透明遮罩
        }
        if (cell.isBooked === '可预约') {
          return 'cell-status-available' // 可预约：加绿色边框
        }
      }
      // 非座位类型（如走廊、讲台）：仅轻微灰色边框，不遮挡图片
      return 'cell-status-normal'
    },

    // 点击格子（逻辑不变）
    handleClick(cell) {
      if (cell.type !== '座位') return
      if (cell.isBooked === '被预约') {
        uni.showToast({ title: '该座位已被预约', icon: 'none' })
      } else if (cell.isBooked === '可预约') {
        this.currentCell = cell
        this.showBookingModal = true
      }
    },

    // 确认预约方式（逻辑不变）
    confirmBooking(cardOrderId) {
      if (cardOrderId === 0 && this.userNum <= 0) {
        uni.showToast({ title: '次数不足', icon: 'none' })
        return
      }
      if (cardOrderId !== 0 && !this.validCardOrders.some(card => card.id === cardOrderId)) {
        uni.showToast({ title: '无效的会员卡', icon: 'none' })
        return
      }
      this.book(cardOrderId)
    },

    // 获取今天日期（逻辑不变）
    getToday() {
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    // 图片加载成功（逻辑不变）
    handleImageLoad(cell) {
      cell.imageError = false;
      if (cell.photo && !cell.processedPhoto) {
        cell.processedPhoto = cell.photo;
      }
    },

    // 图片加载失败（逻辑不变）
    handleImageError(cell) {
      console.warn(`图片加载失败：${cell.photo}`);
      cell.imageError = true;
      // 可选：加载失败用默认图替换（需添加默认图到static目录）
      // cell.photo = '/static/default-seat.png';
    }
  }
}
</script>

<style>
.study-room {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  box-sizing: border-box;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 10rpx 0;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.date-picker {
  font-size: 28rpx;
  color: #666;
  padding: 10rpx 20rpx;
  border: 1rpx solid #ccc;
  border-radius: 8rpx;
  background-color: #fff;
}

.grid {
  display: grid;
  width: 100%;
  background-color: #fff;
  padding: 15rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  box-sizing: border-box;
}

/* 关键修改1：拆分基础样式和状态样式 */
/* 基础容器样式：确保图片能正常显示（不被背景遮挡） */
.cell {
  aspect-ratio: 1 / 1; /* 保持正方形 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2rpx;
  border-radius: 6rpx;
  transition: all 0.2s;
  overflow: hidden; /* 防止图片溢出容器 */
  position: relative; /* 为状态遮罩做定位准备 */
}

/* 图片容器基础样式：确保图片占满容器 */
.cell-img-container {
  border: 1rpx solid #eee; /* 基础边框（所有格子统一） */
}

/* 图片样式：100%占满容器，层级高于状态遮罩 */
.cell-img {
  width: 100%;
  height: 100%;
  z-index: 1; /* 图片层级1，确保在遮罩之上 */
}

/* 图片加载失败占位样式 */
.cell-img-placeholder {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  border-radius: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.placeholder-text {
  font-size: 20rpx;
  color: #999;
  text-align: center;
  padding: 10rpx;
}

/* 关键修改2：状态样式仅控制“遮罩/边框”，不影响图片显示 */
/* 非座位/默认状态：仅轻微灰色（不遮挡图片） */
.cell-status-normal {
  background-color: transparent; /* 透明背景，不遮挡图片 */
}

/* 被预约状态：半透明灰色遮罩（覆盖在图片上，但不完全遮挡） */
.cell-status-booked::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #979797;
  opacity: 0.5; /* 半透明，既能显示状态又能看到图片 */
  z-index: 0; /* 遮罩层级0，低于图片 */
}

/* 可预约状态：绿色边框（仅强调边框，不影响图片） */
.cell-status-available {
  border: 2rpx solid #4cd964 !important; /* 绿色边框突出可预约 */
  background-color: transparent; /* 透明背景，显示图片 */
}

/* 可预约点击反馈（逻辑不变） */
.cell-status-available:active {
  transform: scale(0.95);
}

/* 预约对话框样式（不变） */
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-container {
  width: 80%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1rpx solid #eee;
}

.modal-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.modal-close {
  font-size: 36rpx;
  color: #999;
}

.modal-body {
  padding: 30rpx;
}

.remaining-times {
  padding: 15rpx 0;
  font-size: 28rpx;
  color: #666;
  border-bottom: 1rpx dashed #eee;
  margin-bottom: 20rpx;
}

.card-list-title {
  font-size: 26rpx;
  color: #999;
  margin: 20rpx 0 10rpx;
}

.booking-option {
  padding: 20rpx;
  background-color: #f5f7fa;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
  font-size: 28rpx;
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

.booking-option:active {
  background-color: #e8eaed;
}

.no-option {
  padding: 30rpx;
  text-align: center;
  font-size: 28rpx;
  color: #999;
}
</style>